<template>
  <view class="page-container">
    <!-- 背景图片和文字区域 -->
    <view class="background-image-container">
      <img 
        src="https://cdn.builder.io/api/v1/image/assets/TEMP/7c39c3bb9015cbb7888b2cf634549fa4731446fbbcec83a3cb8d8f6bd5415ce4?placeholderIfAbsent=true&apiKey=a8197e2c79ff4f54b36ec1cb4eb509e7"
        class="background-image" 
        alt="背景图片"
      />
      <div class="credit-score-text">我的信用分：{{creditRating}}</div>
    </view>
 
    <!-- 问候语 -->
    <view class="greeting typing-effect">
      <text>{{ greeting }}</text>
      <text class="username">{{ username }}</text>
    </view>

    <!-- 灰色渐变区域 -->
    <view class="gradient-background"></view>

    <!-- 页面内容 -->
    <view class="menu-container">
      <view class="menu-item personal-info" @click="personalInfo">
        <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/143ade28630286400b3f0636dd1dfe4e4feebd1075e7c66d419d01800d21dcb7?placeholderIfAbsent=true&apiKey=a8197e2c79ff4f54b36ec1cb4eb509e7" class="menu-icon" alt="个人信息" />
        <span>修 改 信 息</span>
      </view>
      <view class="menu-item" @click="myTravel">
        <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/1565498f5fed3cbe3bdef6970703f13b8ad363c128428d6f9184d2c754b2908c?placeholderIfAbsent=true&apiKey=a8197e2c79ff4f54b36ec1cb4eb509e7" class="menu-icon" alt="我的旅程" />
        <span>我 的 活 动</span>
      </view>
      <view class="menu-item" @click="setting">
        <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/9302e7b86b9d9fee7abe6c7545120b0035ced06c8f32870b997d4675f38bd877?placeholderIfAbsent=true&apiKey=a8197e2c79ff4f54b36ec1cb4eb509e7" class="menu-icon" alt="设置" />
        <span>设       置</span>
      </view>
      <view class="menu-item" @click="help">
        <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/ad7b1e65c7343f9f2287667f762bff098aa4119edf8886aa10829cb3df935227?placeholderIfAbsent=true&apiKey=a8197e2c79ff4f54b36ec1cb4eb509e7" class="menu-icon" alt="帮助" />
        <span>帮       助</span>
      </view>
      <view class="menu-item" @click="contactUs">
        <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/c6af04085b8e9e437aaf437e41aaed41e34b54404a6e680dac7dbfa6907d321d?placeholderIfAbsent=true&apiKey=a8197e2c79ff4f54b36ec1cb4eb509e7" class="menu-icon" alt="联系我们" />
        <span>联 系 我 们</span>
      </view>
      <view class="menu-item" @click="logout">
        <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/b2b524a64e054f831bd99f2e19e09caf3020d1e7e11d069448cb49eb5d8aa51f?placeholderIfAbsent=true&apiKey=a8197e2c79ff4f54b36ec1cb4eb509e7" class="menu-icon" alt="退出登录" />
        <span>退 出 登 录</span>
      </view>
      <view class="menu-static"></view>
    </view>
  
		<view v-if="showContactModal" class="modal-container">
			<view class="modal">
				<view class="modal-content">
				  <view class="modal-header">
					<text class="modal-title">联系我们</text>
					<view class="close-btn" @click="closeModal">x</view>
				  </view>
				  <view class="modal-body">
					  <text class="phone-number">电话号码: </text>
					  <a href="javascript:void(0)" class="phone-number" @click="makePhoneCall(adminPhone)">
					      {{adminPhone}}
					  </a>
					  <a href="javascript:void(0)" class="phone-number" @click="makePhoneCall(adminPhone2)">
					      {{adminPhone2}}
					  </a>
					  <text class="phone-number">工作时间：12:00~22:00</text>
				  </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { PinlistAPI,getUserInfo } from '../../services/api';
export default {
  data() {
    return {
      username: '', // 初始化为空
      greeting: this.getGreeting(),
	  creditRating: 0,
	  istourist: true,
	  showContactModal: false, 
	  adminPhone:"15820647403",
	  adminPhone2:"13455505220",
    };
  },
  created() {
    this.fetchUsername(); // 在组件加载时获取用户名
  },
  methods: {
    getGreeting() {
      const hour = new Date().getHours();
      if (hour >= 6 && hour < 12) {
        return '早上好，';
      } else if (hour >= 12 && hour < 18) {
        return '下午好，';
      } else {
        return '晚上好，';
      }
    },
    async fetchUsername() {
      try {
        const userinfo = await getUserInfo();
        this.username = userinfo['username'];
		this.creditRating = userinfo['creditRating'];
		this.istourist = false;
      } catch (error) {
        console.error('获取用户名失败:', error);
        this.username = '游客'; // 设置默认用户名
		this.istourist = true;
      }
    },
    navigateTo(page) {
      console.log(`Navigating to ${page}`);
      // uni.navigateTo({
      //   url: `/pages/${page}/${page}`,
      // });
    },
	setting() {
	  console.log('setting');
	      uni.navigateTo({
	      url: '/pages/userBranch/setting',
	    });
	},
    help() {
      console.log('help');
      uni.navigateTo({
        url: '/pages/userBranch/help',
      });
    },
    personalInfo() {
      console.log('personal info');
	  if (this.istourist) {
	    console.log('游客暂无个人信息');
	    uni.showToast({
	      title: '请先登录',
	      icon: 'none'
	    });
	  } else {
      uni.navigateTo({
        url: '/pages/userBranch/personal_info',
      });
	  }
    },
    myTravel() {
      console.log('My Travel');
	  if (this.istourist) {
	    console.log('游客暂无法进入');
	    uni.showToast({
	      title: '请先登录',
	      icon: 'none'
	    });
	  } else {
      uni.navigateTo({
        url: '/pages/userBranch/myTravel',
      });
	  }
    },
	
	// 显示联系人的弹窗
    contactUs() {
      this.showContactModal = true;
    },
    // 关闭弹窗
    closeModal() {
      this.showContactModal = false;
    },
    logout() {
      console.log('Logging out');
      
      // 清空缓存数据
      uni.clearStorageSync();
	  console.log(uni.getStorageSync('sessionValue'))
      // 跳转到登录/注册选择页面
      uni.redirectTo({
        url: '/pages/welcomePage',
      });
    },
	makePhoneCall(phoneNumber) {
	  uni.makePhoneCall({
	    phoneNumber: phoneNumber, // 要拨打的电话号码
	    success() {
	      console.log('拨打电话成功');
	    },
	    fail() {
	      console.log('拨打电话失败');
	    }
	  });
	},
  },
};
</script>


<style scoped>
.page-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
}

/* 背景图片和文字区域 */
.background-image-container {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 150px;
  height: 100px;
  z-index: 10;
  text-align: center;
}
/*图片样式*/
.background-image {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.credit-score-text {
  color: black;
  font-size: 16px;
  margin-top: 10px;
  z-index: 11;
}

/* 问候语 */
.greeting {
  position: absolute;
  top: 10px;
  left: 15px;
  font-size: 20px;
  color: black;
  z-index: 100;
}

.username {
  font-weight: bold; /* 加粗用户名 */
}

/* 打字机动画 */
.typing-effect {
  display: inline-block;
  overflow: hidden; /* 隐藏文字超出范围的部分 */
  white-space: nowrap; /* 防止文字换行 */
  animation: typing 2s steps(20, end), blink 0.5s step-end 2, expand-width 2s forwards; /* 打字和光标闪烁效果 */
  border-right: 2px solid transparent; /* 模拟打字机的光标 */
  width: fit-content;
}

/* 打字机效果 */
@keyframes typing {
  from {
    width: 0; /* 从0宽度开始 */
  }
  to {
    width: 100%; /* 最后展示完整内容 */
  }
}
@keyframes expand-width {
  to {
    width: fit-content; /* 在动画完成时，宽度自适应内容 */
  }
}
/* 光标闪烁效果 */
@keyframes blink {
  50% {
    border-color: black; /* 光标消失 */
  }
}

.gradient-background {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: calc(100% - 200px);
  background: linear-gradient(to bottom, #f5f5f5, #d0d0d0);
  z-index: 0;
}

.menu-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  z-index: 99;
  overflow: visible;
}

.menu-item {
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  color: #000;
  font-size: 18px;
  font-weight: normal;
  border-top: 1px solid #BBB;
  cursor: pointer;
  padding-left: 25px;
  background-color: #fff; 
}

.menu-item:first-child {
  border-top: none;
}

.menu-item:active {
  background-color: #f0f0f0;
}

.menu-icon {
  height: 30px;
  width: 30px;
  object-fit: contain;
  margin-right: 25px;
}

.personal-info {
  background-color: #fff;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  overflow: hidden;
}

.menu-static {
  height: 70px;
  line-height: 60px;
  text-align: center;
  color: #666;
  font-size: 14px;
  border-top: 1px solid #BBB;
  background-color: #fff;
}
/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 10px;
  width: 80%;
  max-width: 300px;
  padding: 20px;
  text-align: center;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 18px;
  font-weight: bold;
}

.close-btn {
  cursor: pointer;
  font-size: 18px;
}

.modal-body {
  margin-top: 10px;
}

.phone-number {
  font-size: 30px;
  color: #333;
}
</style>
